<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 10px;">
      <el-input class="admin_search_text" v-model="keywords" placeholder="通过用户名搜索用户" prefix-icon="el-icon-search"
        style="width: 300px;margin-right: 8px;" @keydown.enter.native="AdminSearch"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="AdminSearch">搜索</el-button>
    </div>

    <!-- 下载展示 -->
    <div class="admin_con">
      <el-card class="admin-card" v-for="(item, index) in admins" :key="index">
        <div slot="header" class="clearfix">
          <span>{{ item.name }}</span>
          <el-button style="float: right; padding: 3px 0;color: red;" type="text" icon="el-icon-delete"
            @click="doDeleteAdmin(item)"></el-button>
        </div>

        <div class="admin_con_warp">

          <div class="admin_userface">
            <img class="admin_userface_con" :src="item.userFace" :alt="item.name" />
          </div>

          <div class="admin_info">
            <div class="info_item">用户名:&nbsp;&nbsp;{{ item.username }}</div>
            <div class="info_item">手机号:&nbsp;&nbsp;{{ item.phone }}</div>
            <div class="info_item">电话号:&nbsp;&nbsp;{{ item.telephone }}</div>
            <div class="info_item">住址:&nbsp;&nbsp;{{ item.address }}</div>
            <div class="info_item">
              用户状态:&nbsp;&nbsp;
              <el-switch size="mini" v-model="item.enabled" active-color="#13ce66" inactive-color="#ff4949"
                active-text="启用" inactive-text="禁用" @change="enabledChange(item)">
              </el-switch>
            </div>
            <div>
              用户角色:&nbsp;&nbsp;
              <el-tag class="admin_role" type="success" v-for="(item1, index1) in item.roles" :key="index1">{{
                item1.nameZh
              }}</el-tag>
              <el-popover placement="right" title="角色列表" width="200" trigger="click" @show="showPop(item)"
                @hide="hidePop(item)">
                <el-select v-model="selectRoles" multiple placeholder="请选择">
                  <el-option v-for="(item, index) in allRoles" :key="index" :label="item.nameZh" :value="item.id">
                  </el-option>
                </el-select>
                <el-button slot="reference" style="padding: 3px 0; color: #409eff" type="text"
                  icon="el-icon-more"></el-button>
              </el-popover>
            </div>
            <div class="info_item">备注:&nbsp;&nbsp;{{ item.remark }}</div>
          </div>
        </div>

        <!-- <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div> -->
      </el-card>
    </div>


  </div>
</template>

<script>
import { getRequest } from '@/utils/api';

export default {
  data() {
    return {
      // 所有操作员数据
      admins: [],
      // 搜索文本
      keywords: "",
      // 所有角色
      allRoles: [],
      // 选中角色
      selectRoles: [],
    }

  },
  methods: {
    // 初始化操作员
    initAllAdmin() {
      this.getRequest("/system/admin/?keywords=" + this.keywords).then((resp) => {
        if (resp) {
          this.admins = resp;
        }
      });
    },
    // 搜索操作员
    AdminSearch() {
      this.initAllAdmin();
    },
    // 删除操作员
    doDeleteAdmin(data) {
      this.$confirm('此操作将永久删除[ ' + data.name + ' ], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/admin/' + data.id).then(resp => {
          this.initAllAdmin();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 更新操作员 
    enabledChange(admin) {
      delete admin.roles;
      delete admin.authorities;
      this.putRequest('/system/admin/', admin).then(resp => {
        if (resp) {
          this.initAllAdmin();
        }
      })

    },
    // 初始化角色
    initAllRoles() {
      getRequest('/system/admin/roles').then((resp) => {
        if (resp) {
          this.allRoles = resp;
        }
      });
    },
    // 选中下拉框
    showPop(admin) {
      this.initAllRoles();
      // 拿到对应的角色
      let roles = admin.roles;
      // 初始化
      this.selectRoles = []

      roles.forEach(r => {
        this.selectRoles.push(r.id);
      });
    },
    // 隐藏修改
    hidePop(admin) {
      let roles = [];
      Object.assign(roles, admin.roles)
      let flag = false;
      if (roles.length != this.selectRoles.length) {
        flag = true;
      } else {
        for (let i = 0; i < roles.length; i++) {
          let role = roles[i];
          for (let j = 0; j < this.selectRoles.length; j++) {
            let sr = this.selectRoles[j];
            if (role.id == sr) {
              roles.splice(i, 1);
              i--;
              break;
            }
          }
        }

        if (roles.length != 0) {
          flag = true;
        }

      }
      let url = '/system/admin/role?adminId=' + admin.id;
      this.selectRoles.forEach(sr => {
        url += '&rids=' + sr;
      })
      this.putRequest(url).then(resp => {
        if (resp) {
          this.initAllAdmin();
        }
      })
    }
  },



  mounted() {
    this.initAllAdmin();
    // this.initAllRoles();
  }
}
</script>

<style>
.admin_title {
  margin: 10px 0;
  display: flex;
  justify-content: center;

}

.admin-card {
  display: inline-block;
  width: 350px;
  height: 330px;
  margin: 20px;
  padding: 10px;
}

.admin_con {
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-around;
}

/* 图片处理 */
.admin_userface_con {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}

.admin_info {
  line-height: 20px;
  font-size: 12px;
  color: #409eff;
}

/* 头像剧中 */
.admin_userface {
  display: flex;
  justify-content: center;
}

.admin_role {
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>      